<template>
  <div class="deals-page">
    <ResponsiveNav />
    <div class="nav-placeholder"></div>
    <main class="deals-content">
      <router-view v-if="$route.name === 'DealDetail'" />
      <template v-else>
        <DealsBanner />
        <DealsGrid />
      </template>
    </main>
    <div class="bottom-wrapper">
      <div class="divider"></div>
      <ProductCarousel />
      <div class="divider"></div>
      <PersonalizedRecommendation />
      <Footer />
    </div>
  </div>
</template>

<script setup lang="ts">
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import DealsBanner from './components/DealsBanner.vue'
import DealsGrid from './components/DealsGrid.vue'
import PersonalizedRecommendation from '@/components/PersonalizedRecommendation.vue'
import ProductCarousel from '@/components/ProductCarousel.vue'
</script>

<style lang="scss" scoped>
.deals-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;

}

.deals-content {
  flex: 1;
  padding: 20px;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
}

.bottom-wrapper {
  width: 100%;
  background-color: #fff;
  margin-top: auto;

  .divider {
    height: 1px;
    background-color: #ddd;
    max-width: 100%;
    margin: 0 auto;
  }
}
</style> 